<template>
    <div class="page">
        <div class="header">
            <div class="header-ctl">
                 <router-link to="/my" class="header-ctl-btnLeft">
                    <img src="../assets/back-btn-white.png">
                </router-link>
                <h1 class="header-ctl-title">查询客户行程</h1>
                <div class="header-ctl-btnRight"></div>
            </div>
        </div>
   
        <div class="list">
            <form @submit.prevent="formSubmit">
                <div class="list-item">
                    <div class="list-item-input">
                        <input name="name1"  type="text" maxlength="11" v-model="customOrder" placeholder="请输入客户订单号，例：kbxc-160750"/>
                    </div>
                </div>
                <div class="incomeSubmit">
                    <input type="submit" class="incomeSubmit-btn"  value="立即查询"/>
                </div>
            </form>
        </div>
        <div class="program-about">
            <img  class="program-about-img" src="../assets/my-program-about.png" alt="" >
        </div>
    </div>
</template>

<script>
    import { Toast,MessageBox  } from 'mint-ui';
    import config from '../store/config';
    import wxShare from "../store/wxShare"
    export default {
        name: "My-admin",
        data() {
            return {
                url:config.url,
                customOrder:'',
            }
        },
        methods: {
            formSubmit: function () {
                let _that = this;
                _that.customOrder = _that.customOrder.replace(/\s+/g, '');
                if (!_that.customOrder) {
                    Toast({message:'请输入需要查询的客户订单号', duration: 1000});
                    return false;
                }
                _that.$router.push({path:"/my-program?order="+_that.customOrder})
            },
            share() {
                wxShare({title: '内部-查询客户行程', debug: false}, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted(){
            if(!localStorage.userinfo || !JSON.parse(localStorage.userinfo).is_admin){
                this.$router.replace({path:"/my"})
            }
            window.scrollTo(0,0);
            this.share();
        }
    }
</script>

<style lang="scss" scoped>

    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(60);
        background: $bgcolor1;
    }
    .page{
        background: #E8EBF1;
        min-height: 100%;
        color: #333333;
    }

    .header{
        background:#F58033;
        color: #FFFFFF;
        &-ctl{
            display: flex;
            align-items: center;
            padding:rpx(10) rpx(30);
            justify-content: space-between;
            &-btnLeft{
                width: rpx(64);
                height: rpx(64);
                padding-top: rpx(16);
                img{
                    width: rpx(32);
                    height: rpx(32);
                }
            }
            &-btnRight:after{
                display: block;
                content: ' ';
                width: rpx(64);
                height: rpx(64);
            }
            &-title{
                flex: 1;
                font-size: rpx(36);
                text-align: center;
                font-weight: normal;
            }
        }
        &-tips{
            text-align: center;
            p{
                line-height: 1.3;
            }
        }
    }


    //项列表
    .list {
        margin: rpx(30);
        &-item {
            display: flex;
            align-items: center;
            overflow: hidden;
            background: $color0;
            padding:rpx(35) rpx(30);
            &-input {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: rpx(34);
                input{
                    width: 100%;
                    font-size: rpx(34);
                }
            }
        }
    }
    .incomeSubmit{
        padding: rpx(60) 0 ;
        &-btn{
            display: block;
            width: 100%;
            height: rpx(100);
            line-height: rpx(100);
            background: $color3;
            border-radius: $radius6;
            color: $color0;
            font-size: rpx(34);
            text-align: center;
        }
    }

    .program-about{
        padding: rpx(30);
        &-img{
            width: 100%;
            height: auto;
        }
    }
    .pending{
        border: 1px solid #3EAC45!important;
        color: #3EAC45!important;
    }
    .toBeConfirm{
        border: 1px solid #F36C20!important;
        color: #F36C20!important;
    }
    .confirmed{
        border: 1px solid #B6B7B8!important;
        color: #B6B7B8!important;
    }

</style>